<template>
  <div class="app-container">
    <div style="margin:15px 0;">
      请填写用户ID：
      <el-input v-model="inputValue" placeholder="用户ID" style="width:300px;margin-top:10px;">
        <el-button slot="append" icon="el-icon-search" @click.native="search"/>
      </el-input>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="用户ID" prop="userId" />
      <el-table-column align="center" label="用户昵称" prop="nickname" />
      <el-table-column align="center" label="真实姓名" prop="name" />
      <el-table-column align="center" label="证件号码" prop="idNumber" />
      <el-table-column align="center" label="证件照片" width="400">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.idNumberImage" :key="index" class="imgs">
            <img :src="item" class="img" title="点击放大" @click="scaleImg(item)">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="认证时间">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="changeStatus(scope.row.userId)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPages" :limit.sync="listQuery.pageSize" align="center" @pagination="fetchData" />
    <el-dialog :visible.sync="centerDialogVisible" title="图片详情" width="80%" center>
      <img :src="curScaleImg" class="curScaleImg">
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="请审批">
      <el-form size="medium">
        <el-form-item>
          <el-select v-model="value" placeholder="请选择">
            <el-option label="通过" value="3" />
            <el-option label="驳回" value="4" />
          </el-select>
          <el-select v-show="value=='4'" v-model="rejectDesc" placeholder="请选择驳回原因">
            <el-option label="实名认证失败，身份信息不符。" value="实名认证失败，身份信息不符。" />
            <el-option label="实名认证失败，证件不符合要求。" value="实名认证失败，证件不符合要求。" />
            <el-option label="其它原因" value="其它原因" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="rejectDesc=='其它原因'">
          <el-input v-model="rejectDescOther" placeholder="请填写驳回原因" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserRealInfoList, updateUserRealState } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
export default {
  name: 'Tree',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      inputValue: '',
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        realState: 2,
        currentPages: 1,
        pageSize: 15
      },
      curScaleImg: '',
      centerDialogVisible: false,
      curId: '',
      dialogFormVisible: false,
      value: '3',
      rejectDesc: '',
      rejectDescOther: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    fetchData() {
      this.listLoading = true
      getUserRealInfoList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    search() {
      this.listQuery.userId = this.inputValue
      this.fetchData()
    },
    scaleImg(url) {
      this.curScaleImg = url
      this.centerDialogVisible = true
    },
    changeStatus(id) {
      this.value = '3'
      this.rejectDesc = ''
      this.rejectDescOther = ''
      this.dialogFormVisible = true
      this.curId = id
    },
    updateStatus() {
      this.listLoading = true
      let text = ''
      if (this.value === '4') {
        if (this.rejectDesc === '') {
          this.$message('请选择驳回原因')
          return false
        } else if (this.rejectDesc === '其它原因') {
          if (this.rejectDescOther === '') {
            this.$message('请填写驳回原因')
            return false
          } else {
            text = this.rejectDescOther
          }
        } else {
          text = this.rejectDesc
        }
      }
      updateUserRealState({
        userId: this.curId,
        realState: this.value,
        rejectDesc: text
      }).then(response => {
        setTimeout(() => {
          this.listLoading = false
        }, 300)
        if (response.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listQuery.currentPages = 1
          this.fetchData()
        } else {
          this.$message.error('操作失败请重试')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.imgs{
  width:100px;
  height:100px;
  display:inline-block;
  margin: 0 10px;
  border:1px solid #eee;
}
.img{
  width:100px;
  height:100px;
  display:inline-block;
  cursor: pointer;
}
.curScaleImg{
  width:auto;
  max-width:100%;
  height:500px;
}
</style>
